<template>
  <view class="mh-con px-3 h-flex">
    <view class="pa-6">
      <view class="d-center pa-4 mt-4">
        <!-- <q-icon src="/static/icon/logo.svg" size="70"></q-icon> -->
        <view
          class="bdrs-100"
          hover-class="btn-1"
          @click1="$navTo('mine/info')"
        >
          <q-img src="/static/img/dd.png" size="80" mode="aspectFit"></q-img>
        </view>
      </view>
      <view class="pa-5"></view>
      <view class="fz-18 fw-b">{{ isNext ? "Check Code" : "绑定手机号" }}</view>
      <view class="mt-1 fz-14 op-5" v-if="isNext">
        验证邮箱：{{ form.mobile }}
      </view>
      <view class="mt-6" v-if="!inMp">
        <view v-if="isNext" class="d-center">
          <u-code-input v-model="form.vcode" focus maxlength="4"></u-code-input>
        </view>
        <view v-else class="bg-cell px-3 py-2 bdrs-5">
          <u-input
            v-model="form.mobile"
            placeholder="Your email"
            type="number"
            border="none"
          />
        </view>
      </view>
      <view class="mt-6" v-if="inMp">
        <u-button
          type="primary"
          :disabled="!isAgree"
          :loading="validating"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
          >{{ isAgree ? "快速验证" : "请同意协议" }}</u-button
        >
      </view>
      <view class="mt-6" v-else>
        <u-button
          v-if="isNext"
          type="primary"
          :disabled="!vcodeFilled || validating"
          :loading="validating"
          >Login</u-button
        >
        <u-button
          v-else
          type="primary"
          :disabled="!isAgree"
          :loading="sending"
          @click="onNext"
          >{{ isAgree ? "Continue" : "请同意协议" }}</u-button
        >
      </view>
      <view v-if="!isNext && inMp" class="mt-5 py-3 d-center" @click="setAgree">
        <view class="al-c">
          <view class="scale-9 ev-n">
            <u-checkbox-group v-model="agreeCheck">
              <u-checkbox name="1" />
            </u-checkbox-group>
          </view>
          <view class="fz-13">
            <span class="op-6 hover-1">我已阅读并同意</span>
            <span class="color-1 hover-1" @click.stop="goAgree()"
              >《用户协议》</span
            >
            <span class="op-6">和</span>
            <span class="color-1 hover-1" @click.stop="goAgree('privacy')"
              >《隐私政策》</span
            >
          </view>
        </view>
      </view>
    </view>

    <!-- <view class="mt-auto px-6 pb-5">
      <u-divider text="快速登录"></u-divider>
      <view class="d-center">
        <view class="hover-1">
          <q-icon src="/static/svg/ic-wx.svg" size="40" />
        </view>
      </view>
    </view> -->
    <u-safe-bottom />
  </view>
</template>

<script>
import { mapState } from "vuex";
import mixin from "./login.js";

export default {
  mixins: [mixin],
  computed: {
    ...mapState(["userInfo"]),
  },
  onLoad({ to }) {
    if (to) {
      this.loginTo = decodeURIComponent(to);
    }
    this.initUser();
  },
  methods: {
    async initUser() {
      try {
        this.$loading();
        await this.$store.dispatch("mpLogin");
        if (this.userInfo.phone) {
          this.onDone();
        }
      } catch (error) {
        console.log(error);
        this.$confirm("初始化出错", error.message, {
          confirmText: "重试",
        })
          .then(() => {
            this.initUser();
          })
          .catch(() => {
            this.$navBack();
          });
      }
      uni.hideLoading();
    },
  },
};
</script>
